<template>
  <div class="container">
    <map-box ref="mapBoxRef" @marker-clicked="handleMarkerClick"></map-box>
    <div class="topLine">
      <div class="left">
        <router-link to="/explore">RETURN</router-link>
        <div class="navigator">
          <img src="@/assets/images/navigator.png" alt="" />
        </div>
      </div>
      <div class="center">杨鹏程/YANG PENGCHENG</div>
      <div class="RIGHT">THE PLANTS AROUND ME</div>
    </div>
    <div class="mask" @click="closeWindow" :class="{ show: showWindow }"></div>
    <div class="popWindow" :class="{ show: showWindow, left: isLeft, right: !isLeft }">
      <div class="window" v-if="markerData">
        <img :src="'https://ossdemo.ajioang.cn/' + markerData.indexs + '.png'" alt="" @click="closeWindow" />
        <div class="yinpin">
          <!-- 下面是采访播放的音频 -->
          <div class="caifang" @click="changeAndPlay(1)">
            <div style="float: left">
              现场采访
            </div>
            <div style="float: left;">
              <div class="audio-spectrum" v-if="isPlayingCaifang">
                <div class="spectrum-bar"></div>
                <div class="spectrum-bar"></div>
                <div class="spectrum-bar"></div>
                <div class="spectrum-bar"></div>
                <div class="spectrum-bar"></div>
              </div>
            </div>
          </div>
          <!-- 下面是绣球播放的音频 -->
          <div class="xiuqiu" @click="changeAndPlay(2)">
            <!-- 当绣球播放音频的时候显示播放图标 -->
            <svg v-if="isPlayingXiuqiu" t="1751975418971" class="icon svgs" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="9788" width="200" height="200">
              <path
                d="M468.992 169.536c29.312-22.528 64.128-40.768 101.312-25.088 36.864 15.616 48.64 53.12 53.76 90.048 5.248 37.824 5.248 89.92 5.248 154.688v245.568c0 64.768 0 116.864-5.184 154.752-5.12 36.864-16.96 74.368-53.76 89.984-37.248 15.744-72.064-2.56-101.376-25.088-30.016-23.04-68.032-61.888-112.832-107.584-23.04-23.552-38.336-34.944-53.76-41.28-15.616-6.4-34.496-9.152-67.456-9.152-28.544 0-54.08 0-73.408-2.048-20.224-2.112-39.04-6.656-56-18.24-32.192-22.016-44.544-54.208-49.28-83.84C52.864 570.24 53.248 545.984 53.568 526.464v-28.928c-0.32-19.52-0.64-43.776 2.816-65.92 4.672-29.568 17.024-61.76 49.28-83.776 16.896-11.52 35.712-16.128 55.936-18.24 19.328-1.984 44.8-1.984 73.344-1.984 33.024 0 51.904-2.752 67.456-9.152 15.488-6.4 30.72-17.792 53.76-41.28 44.8-45.696 82.88-84.608 112.896-107.648zM699.52 350.08a42.688 42.688 0 0 1 59.776 8.064c32.256 42.24 51.392 95.872 51.392 153.856 0 57.92-19.136 111.552-51.392 153.856a42.688 42.688 0 1 1-67.84-51.712c21.056-27.648 33.92-63.104 33.92-102.144 0-39.04-12.864-74.496-33.92-102.144a42.688 42.688 0 0 1 8-59.776z"
                fill="#ffffff" p-id="9789"></path>
              <path
                d="M884.8 269.824a42.688 42.688 0 1 0-62.912 57.6C868.736 378.688 896 442.88 896 512c0 69.12-27.264 133.312-74.112 184.512a42.688 42.688 0 0 0 62.912 57.6c59.904-65.344 96.512-149.632 96.512-242.112 0-92.48-36.608-176.768-96.512-242.176z"
                fill="#ffffff" p-id="9790"></path>
            </svg>

            <!-- 当绣球停止播放的时候显示暂停图标 -->
            <svg v-else t="1751975433725" class="icon svgs" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="10007" width="200" height="200">
              <path
                d="M115.52 55.168a42.688 42.688 0 0 0-60.352 60.352L266.112 326.4a356.608 356.608 0 0 1-31.168 1.152c-28.544 0-54.08 0-73.408 1.984-20.224 2.112-39.04 6.72-56 18.24-32.192 22.016-44.544 54.208-49.28 83.84-3.456 22.08-3.072 46.272-2.752 65.856v28.928c-0.32 19.52-0.64 43.712 2.816 65.792 4.672 29.632 17.024 61.824 49.28 83.84 16.896 11.52 35.712 16.128 55.936 18.24 19.328 1.984 44.864 1.984 73.408 1.984 32.96 0 51.84 2.752 67.392 9.152 15.488 6.4 30.72 17.792 53.76 41.28 44.8 45.76 82.88 84.672 112.896 107.648 29.312 22.528 64.128 40.832 101.312 25.088 36.864-15.616 48.64-53.12 53.76-90.048 3.712-26.496 4.8-59.968 5.12-99.904l279.296 279.296a42.688 42.688 0 1 0 60.352-60.352L115.52 55.168zM570.304 144.448c-37.12-15.68-72.064 2.56-101.376 25.088-17.088 13.184-36.928 31.488-59.072 53.376-8.512 8.384-12.8 12.608-12.8 17.92 0 5.312 4.224 9.6 12.8 18.112L585.6 434.752c18.56 18.56 27.904 27.904 35.84 24.64 7.872-3.264 7.872-16.448 7.872-42.752V389.12c0-64.704 0-116.736-5.248-154.56-5.12-36.928-16.896-74.432-53.76-90.048zM883.2 310.912a42.688 42.688 0 0 0-59.776 60.8C869.952 417.536 896 473.792 896 533.376c0 41.6-12.608 81.216-35.776 116.864a42.688 42.688 0 0 0 71.552 46.464c31.36-48.256 49.536-103.872 49.536-163.328 0-85.888-37.824-163.2-98.048-222.4zM758.336 399.616a42.688 42.688 0 1 0-65.92 54.144c21.12 25.792 32.896 56.448 32.896 88.96v2.048a42.688 42.688 0 1 0 85.376-2.048 224.64 224.64 0 0 0-52.352-143.104z"
                fill="#ffffff" p-id="10008"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MapBox from "@/components/mapBox/index.vue";

export default {
  components: {
    'map-box': MapBox
  },
  data() {
    return {
      isPlayingCaifang: false, // 新增现场采访播放状态
      isPlayingXiuqiu: false,
      showWindow: null,
      isLeft: null,
      markerData: null,
      audioUrl: '',
      newAudioUrl: '',
      nowval: "",//正在播放的是1 还是1s
      nowindex: "", //正在播放得是哪块地图经纬度得
      audioPlayer: null
    }
  },
  methods: {
    changeAndPlay(val) {
      if (this.nowindex == this.markerData.indexs && val == this.nowval) {
        if (this.audioPlayer && !this.audioPlayer.paused) {
          // 暂停对应音频
          if (val === 2) {
            this.audioPlayer.pause();
            this.isPlayingXiuqiu = false;
          } else if (val === 1) {
            this.audioPlayer.pause();
            this.isPlayingCaifang = false;
          }
          return;
        }
      }

      this.nowval = val;
      this.nowindex = this.markerData.indexs;
      this.newAudioUrl = "https://ossdemo.ajioang.cn/" + this.markerData.indexs + (val == 1 ? '' : 's') + '.mp3';

      // 设置对应音频播放状态
      if (val === 2) {
        this.isPlayingXiuqiu = true;
        this.isPlayingCaifang = false;
      } else if (val === 1) {
        this.isPlayingCaifang = true;
        this.isPlayingXiuqiu = false;
      }

      this.bofang();
    },
    bofang() {
      this.audioUrl = this.newAudioUrl;

      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }

      this.audioPlayer = new Audio(this.audioUrl);
      this.audioPlayer.play().catch(error => {
        console.error('播放失败:', error);
        this.isPlayingXiuqiu = false;
        this.isPlayingCaifang = false;
      });

      // 监听音频结束事件
      this.audioPlayer.addEventListener('ended', () => {
        if (this.nowval === 2) {
          this.isPlayingXiuqiu = false;
        } else if (this.nowval === 1) {
          this.isPlayingCaifang = false;
        }
      });
    },
    handleMarkerClick(markerData) {
      console.log("收到子组件的marker点击事件:", markerData);
      this.markerData = markerData;
      console.log(this.markerData.indexs);
      this.isLeft = markerData.lng > 0 ? false : true;
      this.showWindow = true;
    },
    closeWindow() {
      this.showWindow = false;
      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.audio-spectrum {
  display: flex;
  align-items: flex-end;
  height: 20px;
  gap: 2px;
}

.spectrum-bar {
  width: 5px;
  background: linear-gradient(to top, #4285f4, #34a853);
  animation: spectrum-animation 1.6s infinite ease-in-out;
}

.spectrum-bar:nth-child(1) {
  height: 10px;
  animation-delay: 0.1s;
}

.spectrum-bar:nth-child(2) {
  height: 20px;
  animation-delay: 0.2s;
}

.spectrum-bar:nth-child(3) {
  height: 30px;
  animation-delay: 0.3s;
}

.spectrum-bar:nth-child(4) {
  height: 20px;
  animation-delay: 0.4s;
}

.spectrum-bar:nth-child(5) {
  height: 10px;
  animation-delay: 0.5s;
}

@keyframes spectrum-animation {

  0%,
  100% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(1);
  }
}

.svgs {
  width: 20px;
  height: 21px;
  float: right
}

.yinpin {
  position: absolute;
  bottom: 100px;
  right: 70px;
}

.caifang {
  height: 30px;
  color: white;
  text-align: right;
  display: flex;
  justify-content: center;
  justify-items: center;
  font-size: 14px;
  // background: red;
}

.container {
  display: flex;
  justify-content: center;
  background: #080913;
  position: relative;
  height: 100vh;
  width: 100vw;
  align-items: center;
  overflow: hidden;
}

.topLine {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 3vh 6vw 1vh 6vw;
  font-size: 1vw;
  z-index: 999;
  background: #080913;

  .left {
    position: relative;

    a {
      color: #fff;
    }

    .navigator {
      position: absolute;
      left: 50%;
      top: 5vh;
      width: 4.5vw;
      transform: translateX(-50%);

      img {
        max-width: 100%;
      }
    }
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(8, 9, 19, 0.4);
  backdrop-filter: blur(2px);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.popWindow {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;

  .window {
    position: absolute;
    pointer-events: all;
    width: 700px;
    left: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    font-size: 0;
    left: 50%;
    transform: translateX(calc(-50% - 600px)) translateY(-50%);
    top: 50%;

    img {
      max-width: 100%;
    }
  }

  &.show {
    visibility: visible;
    opacity: 1;
  }

  &.right {
    transform: translateX(calc(50%));
  }
}
</style>